<template>
  <div id="push-header">
    <p class="logo lf">{{ sysName }}</p>
    <div class="rf">
      <el-select size="mini" v-model="appId" placeholder="请选择" class="lf" @change="handleApp"  popper-class="zIndex-popper">
        <el-option
          v-for="item in appList"
          :key="item.app_id"
          :label="item.app_name"
          :value="item.app_id">
        </el-option>
      </el-select>
      <p v-if="$route.path !== '/pushIndex'" class="gitback lf" @click="goHome" style="cursor: pointer;">
        切换应用
      </p>
      <p class="gitback lf" @click="goBack" style="cursor: pointer;">
        返回
      </p>
      <p class="logout lf" @click="logout" style="cursor: pointer;">
        退出
      </p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { nextPage } from '../../../assets/js/index'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'push-header',
    data () {
      return {
        appId: '01',
        appList: [
          {
            app_id: '01',
            app_name: '安卓01'
          },
          {
            app_id: '02',
            app_name: '安卓02'
          }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'sysName'
      ])
    },
    methods: {
      ...mapMutations([
        'v3_updateAppId',
        'v3_updateAppTitle',
        'v3_updateAppKey',
        'v3_updateSecretKey',
        'v3_updatePlatform'
      ]),
      // 切换应用
      handleApp (val) {
      },
      // 切换工作区域
      goHome () {
        this.$confirm('确定要切换到工作区首页吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.v3_updateAppId('')
          this.v3_updateAppTitle('')
          this.v3_updateAppKey('')
          this.v3_updateSecretKey('')
          this.v3_updatePlatform('')
          nextPage('/pushIndex')
        }).catch(() => {})
      },
      // 退出
      logout () {
        this.$confirm('将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(api.LOGOUT).then(res => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            this.v3_updateAppId('')
            this.v3_updateAppTitle('')
            this.v3_updateAppKey('')
            this.v3_updateSecretKey('')
            this.v3_updatePlatform('')
            setTimeout(() => {
              window.location.href = '/'
            }, 500)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      },
      // 返回
      goBack () {
        window.location.href = '/view/systemList'
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #push-header
    background #262626
    height 50px
    line-height 50px
    padding 0 20px
    .logo
      color #ddd
      font-size 24px
    .rf
      color #bbb
      .el-select
        margin-right 0
        .el-input
          input
            background #262626
            color #bbb
            border-radius 0
            border-top transparent
            border-left transparent
            border-right transparent
            border-bottom 1px solid #bbb
            padding-left 0
      p
        height 100%
        line-height 49px
        margin-left 10px
        padding 0 10px
        i
          margin-right 5px
      .el-select .el-input.is-focus .el-input__inner
        border-bottom-color #bbb
</style>
